<template>
  <el-button @click="isShow = true" v-if="crud.charAt(0) == '1'">添加管理员</el-button>
  <el-divider />
  <el-table :data="operList" style="width: 100%">
    <el-table-column prop="adminid" label="编号" width="180" />
    <el-table-column prop="adminname" label="账号" width="180" />
    <el-table-column label="角色">
      <template #default="scope">
        <span>{{
          roles.filter((item) => item.value === scope.row.role)[0]?.label
        }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="flag" label="操作">
      <template #default="scope">
        <el-button type="danger" @click="deletOper(scope.row)" v-if="crud.charAt(1) == '1'">删除</el-button>
        <el-button type="danger" @click="editOper(scope.row)" v-if="crud.charAt(2) == '1'">修改</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-dialog v-model="isShow" title="添加操作人员">
    <addoperator @onOK="addOKfn" @onCleas="AddCancefn" />
  </el-dialog>
  <el-dialog v-model="isShowedit" title="修改操作人员">
    <EditOpers :editadminname="editadminname" @onOK="editOkFn" @onCleas="editCancelFn" />
  </el-dialog>
</template>
<!--  -->
<script lang="ts" setup>
import { ref, reactive } from "vue";
import { GetManageList, deleteOperAPI } from "@/api/Login"; // 接口
import type { IOper } from "@/MyTs/index"; //ts
import addoperator from "./Addoperator.vue"; // 子组件
import EditOpers from "./EditOpers.vue"; // 子组件
import { roles } from "./data"; //自定义角色数据
import { ElMessageBox, ElMessage } from "element-plus"; //enement-plus
import { useRoute } from "vue-router";
const $route = useRoute();
//获取router中的按钮权限数据
const crud: string = $route.meta.crud as string

//添加开关
const isShow = ref(false);
//获取管理员数据
const operList = reactive<Array<IOper>>([]);
//获取管理员数据接口
function getList() {
  GetManageList()
    .then((res) => {
      if (res.data.code == 200) {
        operList.length = 0;
        operList.push(...res.data.data);
      }
    })
    .catch((err) => {
      console.log("获取失败");
    });
}
getList(); //调用获取渲染使用

const addOKfn = () => {
  isShow.value = false;  //关闭添加窗口
  getList();  //点击添加后关闭窗口，更新内容

};

//事件没添加成功调用
const AddCancefn = () => {
  addOKfn();
};

const isShowedit = ref(false);

//这个函数是子传父触发事件的
const editOkFn = () => {
  isShowedit.value = false; //关闭添加窗口
  getList(); //点击添加后关闭窗口，更新内容
};
const editCancelFn = () => isShowedit.value = false;; //点击取消关闭页面子组件触发事件

//删除操作人员
const deletOper = (row: IOper) => {
  ElMessageBox.confirm("确认删除该条数据吗", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      deleteOperAPI(row.adminid as string).then((res) => {
        if (res.data.code == 200) {
          ElMessage({
            type: "success",
            message: "删除成功",
          });
          getList();
        }
      });
    })
    .catch(() => {
      ElMessage({
        type: "success",
        message: "取消删除",
      });
    });
};

//修改操作人员
//自定义属性  父传子使用
const editadminname = ref("");
//点击事件 传值row为ts类型  ->页面打开-> 自定义属性的值为 row.adminname 为string属性
const editOper = (row: IOper) => {
  isShowedit.value = true;
  editadminname.value = row.adminname;
};
</script>

<style lang="scss" scoped></style>
